<template>
  <div>
    <!-- <van-nav-bar title="会议管理" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="bg-gray" id="appMeet">
      <van-tabs v-model="active" sticky animated>
        <van-tab v-for="(item,index) in tabs" :key="`${index}tab页`" :title="item.name">
          <div class="tab-panel" :ref="item.data">
            <van-pull-refresh v-model="isLoading" @refresh="showList(item.data, item.page, item.type, item.finished, true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
            <template v-if="getDataFiled(item.data).length == 0">
              <div class="no-data-img">
                <img src="../../assets/meeting/noApproval.png">
                <p>无审批的会议~</p>
              </div>
            </template>
            <van-list 
              v-if="getDataFiled(item.data).length > 0" 
              v-model="loading" 
              :finished="getDataFiled(item.finished)" 
              finished-text="没有更多了" 
              @load="showList(item.data, item.page, item.type, item.finished, false, false)">
              <van-panel class="panel-class" v-for="(all,index) in getDataFiled(item.data)" :key="index" @click="toDetail(all.id)">
                <div slot="header"></div>
                <div class="title-area">
                  <p class="title van-ellipsis">{{ all.name +'-'+ all.appperson + all.title}}</p>
                  <span :class="all.type == '1'?'default-class':all.type=='2'?'agree-class': all.type=='3'?'defined-class':'cancel-class'">{{all.type=='1'?'未审批':all.type=='2'?'已审批':all.type=='3'?'已拒绝':'已取消'}}</span>
                </div>
                <div>
                  <p class="infos">
                    <img class="img-icon" src="../../assets/meeting/icon1.png">
                    <span class="desc-class">{{all.title}}</span>
                  </p>
                  <p class="infos">
                    <img class="img-icon" src="../../assets/meeting/icon2.png">
                    <span class="desc-class">{{all.conferenceroom}}</span>
                  </p>
                </div>
              </van-panel>
            </van-list>
          </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        active: 0,

        tabs:[
          {
            name:'全部',
            type:'1',
            data:'allList',
            page:'allPage',
            finished:'finished'
          },
          {
            name:'待审批',
            type:'2',
            data:'approvalList',
            page:'approvalPage',
            finished:'appfinished'
          }
        ],

        isLoading: false,
        loading: false,

        allList:[],//全部的数据
        allPage:1,//全部的页数
        finished: false,
        
        approvalList:[],//未审批的数据
        approvalPage:1,//未审批的页数
        appfinished: false,
      };
    },
    activated() {
      // this.isLoading= false
      // this.loading= false

      // this.allList= []//全部的数据
      // this.allPage= 1//全部的页数
      // this.finished= false
      
      // this.approvalList= []//未审批的数据
      // this.approvalPage= 1//未审批的页数
      // this.appfinished= false
      this.$bridge.callHandler('navTitle', {title: '会议审批'})
      this.showList('allList', 'allPage', 1, 'finished', true, true)
      this.showList('approvalList', 'approvalPage', 2, 'appfinished', true, true)
    },
    methods: {
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 刷新
       * @return {[type]} [description]
       */
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      getJugment(dataFiled1, dataFiled2){
        return (this[dataFiled1] && this.dataFiled2)
      },
      /**
       * 显示列表
       * @return {[type]} [description]
       */
      showList(target, page, type, finished, init, showToast) {
        this.loading = true
          if(init){
            this[page] = 1
            this[finished] = false
          }
          let config = {
            method:"post",
            url:`${this.$common.basePath}meeting.php`,
            data: {
              do: 'ApprovalAll',
              id: this.$store.state.userId,
              type: type,
              page: this[page]++
            }
          }
          if (showToast) {
            this.$toast({
              duration: 0,
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
          }
          if(!this.finished || init){
            this.$axios(config).then(res => {
              this.loading = false
              this[target] = init?res.data.data : this[target].concat(res.data.data)
              this[target].forEach((item,index) => {
                item.atten = item.attendance.split(",")
                let year = (item.startdate.split(" "))[0]
                item.meetTime = year + " " + this.$common.dateToTime(item.startdate) + "-" + this.$common.dateToTime(item.enddate)
              })
              this.isLoading = false;
              // 加载状态结束
              if(this[target].length >= res.data.count){
                this[finished] = true;
              }
              this.$toast.clear()
            }).catch(err => {
              this.$toast.clear()
              this.isLoading = false;
              this[finished] = true;
            })
          }
      },
      
      /**
       * 详情
       * @param  {[type]} id [description]
       * @return {[type]}    [description]
       */
      toDetail(id) {
        this.$router.push({name:'approvalDetail', query:{id: id}})
      },
      /**
       * 同意按钮
       * @return {[type]} [description]
       */
      agree(id, status) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '确认同意该会议吗？'
        }).then(() => {
          // on confirm
          let config = {
            method: "post",
            url: `${this.$common.basePath}meeting.php`,
            data: {
              do: "Approval",
              type: status,
              oid: id
            }
          }
          this.$axios(config).then(res => {
            this.$toast('您已确认要参加本次会议')
            if(this.active == 0){
              this.showList('allList', 'allPage', 1, 'finished', true, true)
            }else{
              this.showList('approvalList', 'approvalPage', 2, 'appfinished', true, true)
            }
          }).catch(err => {

          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 拒绝
       * @param  {[type]} id     [description]
       * @param  {[type]} status [description]
       * @return {[type]}        [description]
       */
      defined(id, status) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '确认拒绝该会议吗？'
        }).then(() => {
          // on confirm
          let config = {
            method: "post",
            url: `${this.$common.basePath}meeting.php`,
            data: {
              do: "Approval",
              type: status,
              oid: id
            }
          }
          this.$axios(config).then(res => {
            this.$toast('您已成功拒绝参加本次会议')
            if(this.active == 0){
              this.showList('allList', 'allPage', 1, 'finished', true, true)
            }else{
              this.showList('approvalList', 'approvalPage', 2, 'appfinished', true, true)
            }
          }).catch(err => {

          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .bg-gray{
    
  }
  .bg-white{
    background-color: #fff;
  }
  .panel-class{
    margin-top: 10px;
    padding: 15px;
  }
  .left-title{
    max-width: 90px;
  }
  .right-value{
    text-align: left;
  }
  .footer-btn{
    text-align: right;

    button:first-child{
      margin-right: 10px;
      font-size: 17px;
      color: #999999;
      min-width: 80px;
      border: 1px solid #CACACA;
    }

    button:last-child{
      font-size: 17px;
      color: #2E79FF;
      min-width: 80px;
    }
  }
  .no-data-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40% 0 ;
    background-color: #F5F5F5;

    img{
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
  p {
    margin: 0;
  }
  .title {
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    max-width: 286px;
  }
  .infos {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    span{
      margin-left: 5px;
    }
  }
  .title-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .img-icon {
    width: 16px;
    height: 16px;
  }
  .default-class {
    color: #2E79FF;
    font-size: 14px;
  }
  .defined-class {
    color: #F54B03;
    font-size: 14px;
  }
  .agree-class {
    color: #01BF65;
    font-size: 14px;
  }
  .desc-class {
    color: #666666;
    font-size: 14px;
  }
  .cancel-class {
    color: #F5A703;
    font-size: 14px;
  }
  .tab-panel {
    -webkit-overflow-scrolling: touch;
    // height: calc(100vh - 94px);
    background: #f5f5f5;
  }
</style>
<style type="text/css" lang="less">
  #appMeet {
    background-color: #F5F5F5;
    min-height: calc(100vh - 50px);
    -webkit-overflow-scrolling: touch;
    .van-pull-refresh__track {
        min-height: calc(100vh - 104px);
      }
  }
</style>